import './list.scss'
import React, { useEffect, useState } from 'react'
import { ProList, Seckilllist } from '../../axios'
import { InfiniteScroll, List } from 'antd-mobile'
import { CountDown } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { ListItem } from 'antd-mobile/es/components/list/list-item';
export default function List1() {
  let navigate = useNavigate()
  let [ data,setData ] = useState([])
  let [ page,setPage ] = useState(1)
  let [ killList,setKillList ] = useState([])
  let [ fl,setFl ] = useState([
    {
        id:'1',
        img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',
        name:'京东超市'
    },
    {
        id:'2',
        img:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',
        name:'数码电器'
    },
    {
        id:'3',
        img:'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg',
        name:'京东新百货'
    },
    {
        id:'4',
        img:'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',
        name:'京东生鲜'
    },
    {
        id:'5',
        img:'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg',
        name:'京东到家'
    },
  ])
  const [hasMore, setHasMore] = useState(true)
    useEffect(() => {
        ProList(1).then(res => {
            // console.log(res);
            setData(res.data.data)
        })
        Seckilllist().then(res => {
            // console.log(res);
            setKillList(res.data.data)
        })
    },[])
    async function loadMore() {
        setPage(page+1)
        const append = await ProList(page)
        setData(val => [...val, ...append.data.data])
        setHasMore(append.data.data.length > 0)
    }
    // console.log(killList);
  return (
    <div className='list'>
        <div className='fl-box'>
            <ul className='fl-ul'>
                {
                    fl.map(item => {
                        return <li key={item.id}>
                            <img src={item.img} alt="" />
                            <p>{item.name}</p>
                        </li>
                    })
                }
            </ul>
            <ul className='fl-ul'>
                {
                    fl.map(item => {
                        return <li key={item.id}>
                            <img src={item.img} alt="" />
                            <p>{item.name}</p>
                        </li>
                    })
                }
            </ul>
        </div>
        <div>
            <div className='killList-header'>
                <p className='killList-title'>京东秒杀</p>
                <p className='killList-zzz'>16点专场</p>
                <div>
                <CountDown time={2 * 60 * 60 * 1000} millisecond format="HH:mm:ss:SS">
                    {(timeData) => (
                    <>
                        <span className="block">{timeData.hours}</span>
                        <span className="colon">:</span>
                        <span className="block">{timeData.minutes}</span>
                        <span className="colon">:</span>
                        <span className="block">{timeData.seconds}</span>
                    </>
                    )}
                </CountDown>
                </div>
            </div>
            <ul className='killList-ul'>
                {
                    killList.map(item => {
                        return <li key={item.proid}>
                            <img className='killList-img' src={item.img1} />
                            <p className='killList-price'>￥{item.originprice}</p>
                        </li>
                    })
                }
            </ul>
        </div>
        <List>
            {
                data.map((item,index)=>{
                    return <ListItem key={index} onClick={()=>navigate("/detail/"+item.proid)}>
                                <img src={item.img1} />
                                <p className='desc'>{item.desc.slice(5)}</p>
                                <p className='price'>￥{item.originprice}</p>
                             </ListItem>
                })
            }
        </List>
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}
